<template>
  <div>
    <h1>App...</h1>
    <!-- 读取vuex的state数据 -->
    <p>{{ $store.state.msg }}</p>
    <p>{{ msg }}</p>

    <p>{{ $store.getters.formatTime }}</p>
    <p>{{ formatTime }}</p>

    <p>{{ count }}</p>
    <button @click="handleIncrement">+</button>
    <button @click="increment(2)">++</button>
    <button @click="handleDecrement">-</button>
    <button @click="DECREMENT(1)">--</button>
  </div>
</template>

<script>
import {
  // 数据在computed中使用
  mapState,
  mapGetters,
  // 函数在methods中使用
  mapActions,
  mapMutations,
} from "vuex";

export default {
  name: "App",
  computed: {
    // 将vuex的数据映射到计算属性中，将来可以通过计算属性读取vuex的数据
    // ...mapState(["msg"]), // 将vuex中state.msg映射到计算属性中
    /*
      mapState是什么数据类型？函数(因为调用了)
      mapState函数调用后返回值是什么类型？对象（在对象中...，只能是对象）
      这个对象上有什么属性？（属性名是什么，属性值什么类型）
        属性名：msg
        属性值什么类型: 函数
        因为映射到计算属性中，所以msg是只读的计算属性

      执行过程：
        const result = mapState({
          msg: (state) => state.msg,
        })
        ...result

      ...mapState({
        msg: (state) => state.msg,
      }),

      -->
      {
        msg() {
          return state.msg
        }
      }
    */
    ...mapState({
      msg: (state) => state.msg,
      count: (state) => state.count,
    }),
    ...mapGetters(["formatTime"]),
  },
  methods: {
    ...mapActions(["increment"]), // 将来可以通过this.increment间接触发action函数（内部调用了dispatch）
    ...mapMutations(["DECREMENT"]),
    handleIncrement() {
      // 触发action函数
      // dispatch函数只能传递一个参数
      this.$store.dispatch("increment", 2);
      // 如果想传递多个参数？写成对象形式
      // this.$store.dispatch("increment", { a: 1, b: 2 });
    },
    handleDecrement() {
      this.$store.commit("DECREMENT", 1);
    },
  },
};
</script>

<style></style>
